<template>
	<view class="mine">
		<view class="user-info-box">
			<view class="flex-align-center">
				<view class="avatar-img" @click="$navigator('/pagesA/setting/profile')">
					<u-image border-radius="50%" width="104" height="104" :src="userInfo.avatar || require('@/static/img/common/avatar.png')"></u-image>
				</view>
				<view v-if="userInfo.id" @click="$common.navigator('/pagesA/setting/profile')">
					<view class="font-s-18 fw-b">{{userInfo.nickName || userInfo.phone}}</view>
					<view class="user-other">
						<view class="auth-box" v-if="userInfo.isFaceOrc===1">已认证</view>
						<view class="id-box" @click.stop="$common.setClipboardData(userInfo.id)">
							<static-image src="/static/img/mine/icon-id.png" width="32" height="20" margin-right="8"></static-image>
							<view class="">{{userInfo.id}}</view>
							<static-image src="/static/img/mine/icon-copy.png" width="24" height="24" margin-left="4"></static-image>
						</view>
					</view>
				</view>
				<view class="" v-else @click="$common.navigator('/pages/login')">
					<view class="font-s-20 fw-b" >登录/注册</view>
					<view class="font-s-12 mar-t-8">登录领千元奖励 轻松到手</view>
				</view>
			</view>
			<view class="notice-btn" v-if="userInfo.id" @click="$common.navigator('/pagesA/notice/index')">
				<static-image v-if="noReadNum" src="/static/img/mine/icon-notice-tips.png" width="26" height="26"></static-image>
			</view>
		</view>
		<view class="card-menu-box">
			<view class="" @click="$navigator('/pagesA/quota/index')">
				<static-image src="/static/img/mine/icon-hkdd.png" width="88" height="88" margin-right="16"></static-image>
				<view class="">
					<view class="font-s-16 fw-b">额度管理</view>
					<view class="font-s-12 color-999 mar-t-5">我的可借额度</view>
				</view>
			</view>
			<view class="" @click="$navigator('/pagesA/order/list')">
				<static-image src="/static/img/mine/icon-jhjl.png" width="88" height="88" margin-right="16"></static-image>
				<view class="">
					<view class="font-s-16 fw-b">借还记录</view>
					<view class="font-s-12 color-999 mar-t-5">历史借还记录</view>
				</view>
			</view>
		</view>
		<static-image @click="$navigator('/pagesA/setting/invite')" src="/static/img/mine/banner.png" width="100%" height="184"></static-image>
		<view class="menu-cell-box">
			<view class="fw-b font-s-16">其他功能</view>
			<view class="cell-item flex-between-center" @click="$navigator('/pagesA/setting/authentication')">
				<view class="flex-align-center">
					<static-image src="/static/img/mine/icon-smrz.png" width="48" height="48"></static-image>
					<view class="mar-l-12">实名认证</view>
				</view>
				<static-image src="/static/img/common/arrow-right.png" width="28" height="28"></static-image>
			</view>
			<view class="cell-item flex-between-center" @click="$common.navigator(userInfo.secondFourAuthentication===1?'/pagesA/applyFor/bankCard':'/pagesA/applyFor/changeBankCard')" v-if="userInfo.isFaceOrc===1">
				<view class="flex-align-center">
					<static-image src="/static/img/mine/icon-yhbk.png" width="48" height="48"></static-image>
					<view class="mar-l-12">银行绑卡</view>
				</view>
				<view class="flex-align-center">
					<view class="tag-box" :class="{'green-tag':userInfo.secondFourAuthentication===1}">{{userInfo.secondFourAuthentication===1?'已绑卡':'去绑卡'}}</view>
					<static-image v-if="userInfo.secondFourAuthentication===1" src="/static/img/common/arrow-right.png" width="28" height="28"></static-image>
					<static-image v-else src="/static/img/common/arrow-right-orange.png" width="24" height="24" margin-left="6"></static-image>
				</view>
			</view>
			<view class="cell-item flex-between-center" @click="$common.navigator('/pagesA/setting/contact')">
				<view class="flex-align-center">
					<static-image src="/static/img/mine/icon-ptkf.png" width="48" height="48"></static-image>
					<view class="mar-l-12">平台客服</view>
				</view>
				<static-image src="/static/img/common/arrow-right.png" width="28" height="28"></static-image>
			</view>
			<view class="cell-item flex-between-center" @click="$common.navigator('/pagesA/setting/about')">
				<view class="flex-align-center">
					<static-image src="/static/img/mine/icon-gywm.png" width="48" height="48"></static-image>
					<view class="mar-l-12">关于我们</view>
				</view>
				<static-image src="/static/img/common/arrow-right.png" width="28" height="28"></static-image>
			</view>
			<view class="cell-item flex-between-center" @click="$navigator('/pagesA/feedback/index')">
				<view class="flex-align-center">
					<static-image src="/static/img/mine/icon-yjfk.png" width="48" height="48"></static-image>
					<view class="mar-l-12">意见反馈</view>
				</view>
				<static-image src="/static/img/common/arrow-right.png" width="28" height="28"></static-image>
			</view>
			<view class="cell-item flex-between-center" @click="logoutShow=true" v-if="userInfo.id">
				<view class="flex-align-center">
					<static-image src="/static/img/mine/icon-tcdl.png" width="48" height="48"></static-image>
					<view class="mar-l-12">退出登录</view>
				</view>
				<static-image src="/static/img/common/arrow-right.png" width="28" height="28"></static-image>
			</view>
		</view>
		<!-- 退出登录 -->
		<confirm-tips-popup :visible.sync="logoutShow" content="您确认退出本次登录？退出后将需要重新登录才能正常使用!" @confirm="loginOut()"></confirm-tips-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				noReadNum:0,
				logoutShow: false,
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
				this.getNoticeNoReadNum()
			}
		},
		methods: {
			getUserInfo(){
				this.$request({
					url: '/loginUserInfo/getDetail',
					method: 'get'
				}).then(res => {
					this.userInfo = res.data
				})
			},
			getNoticeNoReadNum(){
				this.$request({
					url: '/loginUserInfo/noticeNoReadNum',
					method: 'get'
				}).then(res => {
					this.noReadNum = res.data
				})
			},
			loginOut(){
				uni.showLoading({
					mask:true
				})
				this.$request({
					url: '/loginUserInfo/backOut',
					method: 'post'
				}).then(res => {
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('recommendUserId')
					uni.removeStorageSync('channelId')
					uni.reLaunch({
						url:'/pages/login'
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.mine {
		background-image: url('~@/static/img/mine/header-bg.png');
		background-size: 100% 392rpx;
		background-repeat: no-repeat;
		padding: 88rpx 24rpx 24rpx;
		.user-info-box{
			position: relative;
			color: #fff;
			margin-bottom: 48rpx;
			.avatar-img{
				margin-right: 24rpx;
			}
			.user-other{
				display: flex;
				margin-top: 16rpx;
				>view{
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #CC785A;
					padding: 0 8rpx;
					height: 40rpx;
					background: #EBF4FF;
					border-radius: 8rpx;
					&.auth-box{
						margin-right: 24rpx;
						position: relative;
						margin-left: 20rpx;
						padding-left: 24rpx;
						color: #479DFF;
						&:after{
							content: '';
							background-image: url('~@/static/img/mine/icon-auth.png');
							background-size: 100% 100%;
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							left: -20rpx;
							top: 0;
						}
					}
				}
			}
			.notice-btn{
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
				background-image: url('~@/static/img/mine/icon-notice.png');
				background-size: 100% 100%;
				width: 72rpx;
				height: 72rpx;
				display: flex;
				justify-content: flex-end;
			}
		}
		.card-menu-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			>view{
				display: flex;
				align-items: center;
				width: 340rpx;
				height: 136rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding-left: 24rpx;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.04);
			}
		}
		.menu-cell-box{
			margin-top: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			.cell-item{
				width: 100%;
				height: 128rpx;
				border-bottom: 1rpx solid #F5F5F5;
				font-size: 30rpx;
				font-weight: bold;
				&:last-child{
					border-bottom: 0;
				}
				.tag-box{
					padding: 0 8rpx;
					height: 40rpx;
					border-radius: 8rpx;
					border: 1rpx solid #FF6933;
					color: #FF6933;
					font-size: 24rpx;
					font-weight: initial;
					text-align: center;
					line-height: 38rpx;
					&.green-tag{
						border: 1rpx solid #18CC84;
						color: #18CC84;
					}
				}
			}
		}
	}
</style>
